<template>
  <main class="wss-container">
    <div class="tab-box">
      <ComTabs
        @EventSelectTab="currentSelect"
        :activeName="activeName"
        :tabList="tabList"
      ></ComTabs>
    </div>
    <div class="main-box">
      <div class="category" v-if="activeName == 'category'">
        <Category></Category>
      </div>
      <div class="materials" v-if="activeName == 'materials'">
        <Materials></Materials>
      </div>
      <div class="standard" v-if="activeName == 'standard'">
        <Standard></Standard>
      </div>
    </div>
  </main>
</template>

<script>
import Category from "./category";
import Materials from "./materials";
import Standard from "./standard/index.vue";
import ComTabs from "@/wss/components/ComTabs.vue";
export default {
  data() {
    return {
      activeName: "category",
      // tab页数据
      tabList: [
        {
          label: "项目类别",
          name: "category",
        },
        {
          label: "项目材料",
          name: "materials",
        },
        {
          label: "项目标准",
          name: "standard",
        },
      ],
    };
  },
  methods: {
    currentSelect({ label, index, name }) {
      // console.log(name, "搞定了搞定了");
      this.activeName = name;
    },
  },
  components: { ComTabs, Category, Materials, Standard },
};
</script>

<style scoped>
.wss-container {
  display: flex;
  flex-direction: column;
}
.wss-container .tab-box {
  height: 40px;
  margin-bottom: 20px;
}
.wss-container .main-box {
  height: calc(100% - 60px);
}
.wss-container .category,
.wss-container .materials,
.wss-container .standard {
  height: 100%;
}
</style>